<template>
  <div class="wrapper">
    <dx-header-bar title="客户服务"></dx-header-bar>
    <div class="row">
      <div class="col" v-for="(item, index) in menu"
           :key="index" @click="open(item)">
        <img class="icon" :src="item.icon">
        <div class="name">{{item.name}}</div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { DxHeaderBar } from '@/components';
import iconKHBF from './s_khbf.png';
import iconXJ from './s_xj.png';

export default {
  components: {
    DxHeaderBar
  },
  data() {
    return {
      menu: [
        { name: '巡检', icon: iconXJ, link: '/building' },
        { name: '客户拜访', icon: iconKHBF, link: '/visit' }
      ],
      customerName: this.$route.query.customerName,
      customerCode: this.$route.query.customerCode
    };
  },
  methods: {
    open(data) {
      const query = {};
      if (data.name === '客户拜访') {
        query.customerName = this.customerName;
        query.customerCode = this.customerCode;
      }
      this.$router.push({
        path: data.link,
        query
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
  .row
    overflow: hidden

  .col
    float: left
    padding: 20px
    width: 25%
    text-align: center
    border-bottom: .5px solid #eee
    border-right: .5px solid #eee

  .icon
    display: block
    margin: 0 auto 10px
    height: 96px
    width: 96px

  .name
    font-size: 28px
</style>
